<template>
	<div class="content">
		<div class="warp-box">
			<div class="top-title">
				<span>{{info.name}}</span>
				<img src="../../../../assets/images/car_luckdraw/top_title.png" />
			</div>
			<div class="main">
				<img src="../../../../assets/images/car_luckdraw/box_bg.jpg"
					style=" position: absolute;width:89.79%; height:82%;left: 50%; transform: translate(-50%,0%);" />
				<div class="item-box">
					<div class="sidebar_a">
						<div v-for="(item,index) in  prizeParame" :key="index"
							v-if="item.sort==draw_prize && drawBtn!='查看中奖结果'">
							<!-- 	<el-carousel indicator-position="none" :autoplay="false" arrow="always">
							 <el-carousel-item v-for="item in prizeParame" :key="items"> -->
							<div class="title">
								{{prizeSort[item.sort]}}
							</div>

							<div class="switch-item">
								<img :src="item.image" />
							</div>
							<div class="prize-name">
								{{item.name}}
							</div>
							<!-- </el-carousel-item>
						 </el-carousel> -->

						</div>
						<div class="luckdraw-btn" @click="lotteryRusult" v-if="draw_sort===0">
							查看开奖结果
						</div>
						<div class="luckdraw-btn" @click="lottery" v-else>
							{{drawBtn}}
						</div>
						<div class="luckdraw-num" v-if="drawBtn!='查看中奖结果'">
							一次抽奖{{drawNumber}}人
						</div>
					</div>
					<div class="sidebar_b">
						<div class="top-column">
							<div class="number font-color">参与人数{{drawNumber}}人</div>
							<div class="title">
								<img class="titleBg" src="../../../../assets/images/car_luckdraw/title.png" />
								<div class="row-text">抽奖名单</div>
							</div>
							<div class="awardprizes font-color" v-if="drawBtn=='查看中奖结果'">{{drawBtn}}</div>
							<div class="awardprizes font-color" v-else-if="draw_num!=0">{{prizeNum}}</div>
							<div class="awardprizes font-color" v-else>待开奖</div>
						</div>
						<div class="scroll-box">
							<vue-seamless-scroll :data="codeList" :class-option="defaultOption">
								<div class="ul-scoll">
									<ul>
										<li v-for="(item, index) in codeList" :key='index'>
											<span class="title">{{item}}</span>
										</li>
									</ul>
								</div>
							</vue-seamless-scroll>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var time;
	import vueSeamlessScroll from 'vue-seamless-scroll'
	import $ from 'jquery'
	export default {
		components: {
			vueSeamlessScroll
		},
		data() {
			// 这里存放数据
			return {
				dataList: [],
				draw_prize: 3, //奖项
				drawBtn: '开始抽奖',
				prizeNum: '', //中奖数量
				draw_num: 0, //中奖名额
				step: 3,
				prize_id: '', //奖券id
				codeList: [],
				activity_id: '', //活动id
				drawCode: [], //抽奖号码
				prizeParame: [],
				one_prize: '', //奖项
				two_prize: '',
				three_prize: '',
				info: {},
				drawNumber: '',
				prizeSort: {
					1: '一等奖',
					2: '二等奖',
					3: '三等奖',
					4: '四等奖',
					5: '五等奖',
					6: '六等奖',
				},
				draw_sort: '', //奖项名次
				prize_num: '', //奖项数量
			}
		},
		mounted() {
			let prize_id = this.$route.query.prize_id;
			this.prize_id = prize_id;
			let activity_id = this.$route.query.activity_id;
			this.activity_id = activity_id;
			this.getLuckdrawCode(prize_id);
			this.luckdrawActivity(activity_id);
		},
		// 监听属性
		computed: {
			defaultOption() {
				return {
					step: this.step, // 数值越大速度滚动越快
					limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
					hoverStop: false, // 是否开启鼠标悬停stop
					direction: 1, // 0向下 1向上 2向左 3向右
					openWatch: false, // 开启数据实时监控刷新dom
					singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
					singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
					waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
				}
			}

		},
		methods: {
			goSkip() {
				this.$router.push('/rollingDiscResult')
			},
			//获取卷码
			getLuckdrawCode(prize_id) {
				let params = {
					prize_id: prize_id
				}
				this.codeList = []
				this.drawCode = []; //抽奖号码
				this.dataList = []; //滚动的号码
				this.$http.post('/api/root/activity/luckdraw/codes', params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.drawCode = data; //抽奖号码
						this.drawNumber = data.length;
						this.codeList = data.splice(50, 150); //显示号码
						this.dataList = data.splice(0, 27); //滚动的号码
					} else {
						this.$message.warning(res.msg)
					}
				})
			},
			//奖品数据
			luckdrawActivity(id) {
				let params = {
					item_id: id
				}
				this.$http.post('/api/root/activity/luckdraw/data', params).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.info = data;
						this.prize_num = data.goods.length;
						let arr = [];
						for (var i = 0; i < data.goods.length; i++) {
							arr.push(data.goods[i].sort);
						}
						this.draw_prize = Math.max(...arr);
						this.prizeParame = data.goods;
					} else {
						this.info = {};
					}
				})
			},
			// 文字滚动
			showAuto() {
				this.codeList = [];
				this.codeList = this.dataList;
				var quotes = this.dataList;
				$(".ul-scoll ul li").each(function() {
					var arr = [];
					for (var i = 0; i < quotes.length; i++) {
						var a = parseInt(Math.random() * quotes.length);
						//$(this).text(quotes[a]);
						if (arr.indexOf(a) == -1) {
							arr.push(a);
							$(this).text(quotes[a]);
						} else {
							i--;
							continue;
						}
					}
				});
			},
			queding(num) {
				this.codeList = num;
			},
			// 点击抽奖按钮函数
			lottery() {
				var _this = this;
				// 判断按钮状态
				if (_this.drawBtn !== "停止抽奖") {
					_this.step = 10;
					if (_this.drawBtn === "查看中奖结果") {} else {
						// 滚动条返回顶部（有问题），并修改按钮文本
						$(".ul-scoll").animate({
							scrollTop: 0
						}, 1);
						_this.drawBtn = '停止抽奖';
						console.log(_this.draw_prize + 'w')
						// 判断抽奖的状态
						var prize = _this.prizeParame;
						var draw_prize = _this.draw_prize;
						for (var i = 0; i < prize.length; i++) {
							if (prize[i].sort == draw_prize && draw_prize == 3) {
								_this.prizeNum = "三等奖(" + prize[i].quantity + "名)";
								_this.three_prize = prize[i].quantity;
								_this.draw_sort = prize[i].sort;
								break;
							} else if (prize[i].sort == draw_prize && draw_prize == 2) {
								_this.prizeNum = "二等奖(" + prize[i].quantity + "名)";
								_this.two_prize = prize[i].quantity;
								_this.draw_sort = prize[i].sort;
								break;
							} else if (prize[i].sort == draw_prize && draw_prize == 1) {
								_this.prizeNum = "一等奖(" + prize[i].quantity + "名)";
								_this.one_prize = prize[i].quantity;
								_this.draw_sort = prize[i].sort;
								break;
							}
						}
						// 定时轮番滚动
						time = setInterval(_this.showAuto, 2);
					}
				} else {
					// 判断抽奖的状态
					let drawCode = _this.drawCode;
					let draw_sort = _this.draw_sort;
					let prize_num =_this.prize_num ;
					if (draw_sort === 3) {
						_this.drawBtn = '开始抽取二等奖';
						_this.draw_prize = 2;
						_this.draw_sort = 2;
						_this.randomArr(3, _this.three_prize, drawCode);
						if (prize_num == 1) {
							_this.draw_sort = 0;
							_this.draw_prize = 0;
						}
					}else if (draw_sort === 2) {
						_this.drawBtn = '开始抽取一等奖';
						_this.draw_prize = 2;
						_this.draw_sort = 2;
						_this.randomArr(2, _this.two_prize, drawCode);
						if (prize_num == 1) {
							_this.draw_sort = 0;
							_this.draw_prize = 0;
						}
					}else if (draw_sort === 1) {
								_this.randomArr(1, _this.one_prize, drawCode);
								_this.draw_sort = 0;
								_this.draw_prize = 0;
						if (prize_num == 1) {
							_this.draw_sort = 0;
							_this.draw_prize = 0;
						}
					}
					// 移除动画
					// var quotesArr = _this.quotesArr;
					// setTimeout(function() {
					// 	_this.dataList = [];
					// 	_this.dataList = quotesArr;
					// 	window.clearInterval(time);
					// }, 2);
					// 滚动条返回顶部（有问题）
					$("ul").animate({
						scrollTop: 0
					}, 1);
				}
			},
			randomArr(e, quantity, codeList) {
				var _this = this;
				_this.draw_num = e; //中奖名额
				_this.step = 3.9;
				setTimeout(function() {
					let randStr = _this.getRandomArrayElements(codeList, quantity);
					_this.luckdrawResult(e, randStr);
					window.clearInterval(time);
				}, 1);

			},
			//随机数组
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0),
					i = arr.length,
					min = i - count,
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random());
					temp = shuffled[index];
					shuffled[index] = shuffled[i];
					shuffled[i] = temp;
				}
				return shuffled.slice(min);
			},
			//得奖结果
			luckdrawResult(e, randStr) {
				var randStrs = randStr.toString();
				let params = {
					activity_no: this.activity_id,
					code: randStrs,
					is_lucky: e, //奖项
				}
				this.$http.post('/api/root/activity/luckdraw/savecode', params).then(res => {
					if (res.code == 1) {
						this.getLuckdrawCode(this.prize_id)

					} else {
						//this.$message.warning(res.msg)
					}
				})
			},
			//开奖跳转
			lotteryRusult() {
				let id = this.activity_id;
				this.$router.push({
					name: 'rollingDiscResult',
					query: {
						id
					}
				})
			},
		},
		// 监控data中的数据变化
		watch: {},


	}
</script>

<style scoped lang="less">
	@import 'index.less';
</style>
